<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>视口--viewport</title>
    <!-- <meta name="viewport" content="width=375" /> -->
    <!-- <meta name="viewport" content="width=device-width" /> -->

    <!-- 很少使用，不用考虑 -->
    <!-- <meta name="viewport" content="height=375" /> -->

    <!-- <meta name="viewport" content="initial-scale=1" /> -->

    <!-- 各有一些兼容性的问题，所以最好一起写 -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->

    <!-- <meta name="viewport" content="initial-scale=2" /> -->
    <!-- <meta name="viewport" content="initial-scale=0.5" /> -->

    <!-- <meta name="viewport" content="initial-scale=0.5, user-scalable=yes" /> -->
    <!-- <meta name="viewport" content="initial-scale=0.5, user-scalable=no" /> -->

    <!-- <meta
      name="viewport"
      content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5"
    /> -->

    <!-- 如果不禁止缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- 如果禁止缩放 -->
    <!-- <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"
    /> -->
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/layout.css" />
    <link rel="stylesheet" href="./css/header.css" />
    <link rel="stylesheet" href="./css/slider.css" />
    <link rel="stylesheet" href="./css/course.css" />
    <link rel="stylesheet" href="./icons/iconfont.css" />
    <link rel="stylesheet" href="./css/tabbar.css" />
  </head>
  <body>
    <!-- 头部 -->
    <header class="header-layout">
      <div class="header">
        <a href="./index.html" class="header-logo"
          ><img src="./images/logo.png" alt="logo" class="header-logo-img"
        /></a>

        <button type="button" id="header-toggle" class="header-toggle">
          <span class="header-toggle-bar"></span>
          <span class="header-toggle-bar"></span>
          <span class="header-toggle-bar"></span>
        </button>

        <!-- 导航 -->
        <nav id="nav" class="nav-layout">
          <ul class="nav-list">
            <li><a href="./index.html" class="nav-link">首页</a></li>
            <li>
              <a href="javascript:;" class="nav-link">免费课程</a>
            </li>
            <li>
              <a href="javascript:;" class="nav-link">实战课程&amp;金职位</a>
            </li>
            <li><a href="javascript:;" class="nav-link">专栏/手记/猿问</a></li>
            <li><a href="javascript:;" class="nav-link">慕课教程</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <!-- 主体部分 -->
    <div class="main-layout">
      <!-- 幻灯片 -->
      <div class="slider-layout">
        <img src="./images/slider/1.jpg" alt="" />
      </div>

      <!-- 免费课程 -->
      <div class="course-layout">
        <div class="course">
          <h2 class="course-title">免费课程</h2>
          <ul class="course-list">
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_free/1.jpg" class="course-img" />
                </p>
                <p class="course-name">初识 HTML(5) + CSS(3) - 2020升级版</p>
                <p class="course-price">
                  <strong>免费</strong>
                </p>
              </a>
            </li>
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_free/2.jpg" class="course-img" />
                </p>
                <p class="course-name">
                  Java 入门第一课（IDEA 工具）2020 升级版
                </p>
                <p class="course-price">
                  <strong>免费</strong>
                </p>
              </a>
            </li>
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_free/3.jpg" class="course-img" />
                </p>
                <p class="course-name">Linux C 语言编程基本原理与实践</p>
                <p class="course-price">
                  <strong>免费</strong>
                </p>
              </a>
            </li>
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_free/4.jpg" class="course-img" />
                </p>
                <p class="course-name">
                  炫丽的倒计时效果 Canvas 绘图与动画基础
                </p>
                <p class="course-price">
                  <strong>免费</strong>
                </p>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 实战课程 -->
      <div class="course-layout">
        <div class="course">
          <h2 class="course-title">实战课程</h2>
          <ul class="course-list">
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_coding/1.jpg" class="course-img" />
                </p>
                <p class="course-name">
                  Go微服务入门到容器化实践，落地可观测的微服务电商项目
                </p>
                <p class="course-price">
                  <strong>¥328</strong>
                </p>
              </a>
            </li>
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_coding/2.jpg" class="course-img" />
                </p>
                <p class="course-name">
                  Redis 专项进阶课 解决 Redis 工作实际问题 + 掌握Redis6.x 特性
                </p>
                <p class="course-price">
                  <strong>¥298</strong>
                </p>
              </a>
            </li>
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_coding/3.jpg" class="course-img" />
                </p>
                <p class="course-name">
                  体系课-数据可视化入门到精通-打造前端差异化竞争力
                </p>
                <p class="course-price">
                  <strong>¥848</strong>
                </p>
              </a>
            </li>
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_coding/4.png" class="course-img" />
                </p>
                <p class="course-name">
                  一天时间迅速准备前端面试 快速构建初级前端知识体系
                </p>
                <p class="course-price">
                  <strong>¥299</strong>
                </p>
              </a>
            </li>
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_coding/5.png" class="course-img" />
                </p>
                <p class="course-name">
                  PyTorch 入门到进阶 实战计算机视觉与自然语言处理项目
                </p>
                <p class="course-price">
                  <strong>¥499</strong>
                </p>
              </a>
            </li>
            <li class="course-item">
              <a href="javascript:;">
                <p class="course-pic">
                  <img src="./images/course_coding/6.png" class="course-img" />
                </p>
                <p class="course-name">
                  Vue3.0(正式版) + TS 仿知乎专栏企业级项目 深度剖析 Vue3 新特性
                </p>
                <p class="course-price">
                  <strong>¥348</strong>
                </p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 标签栏 -->
    <div class="tabbar-layout">
      <div class="tabbar">
        <a href="./index.html" class="tabbar-item tabbar-item-active">
          <i class="iconfont icon-home"></i>
          <span>首页</span>
        </a>
        <a href="javascript:;" class="tabbar-item"
          ><i class="iconfont icon-search"></i> <span>搜索</span></a
        >
        <a href="javascript:;" class="tabbar-item"
          ><i class="iconfont icon-personal"></i> <span>我的</span></a
        >
      </div>
    </div>

    <script>
      // 点击切换按钮，展开或收起导航菜单
      {
        const $toggleBtn = document.getElementById('header-toggle');
        const $nav = document.getElementById('nav');
        const navExtendedClassName = 'nav-layout-extended';
        const toggleBtnExtendedClassName = 'header-toggle-active';

        $toggleBtn.addEventListener(
          'click',
          function () {
            $nav.classList.toggle(navExtendedClassName);
            this.classList.toggle(toggleBtnExtendedClassName);
          },
          false
        );
      }
    </script>

    <script>
      // 获取视口宽度
      // console.log(document.documentElement.clientWidth);
      // console.log(document.documentElement.getBoundingClientRect().width);

      // 获取屏幕尺寸，或者获取屏幕的分辨率
      // 不推荐使用，有兼容性问题
      // console.log(screen.width);
    </script>
  </body>
</html>
